می‌توانید   SelectOption را به صورت درختی نمایش داد. برای این کار می‌توانید از پلاگین‌ها و کتابخانه‌های مختلفی مانند Select2، Selectize.js و... استفاده کنید که قابلیت نمایش درختی را در خود دارند.

به عنوان مثال، با استفاده از کتابخانه Select2 می‌توانید یک SelectOption درختی پیاده‌سازی کنید. برای این کار، نیاز است که سلسله مراتبی از آیتم‌ها را در یک ساختار JSON به صورت درختی به Select2 بدهید. به عنوان مثال:

<select id="my-select"></select>

<script>
$(document).ready(function() {
    $('#my-select').select2({
        data: [
            { id: 1, text: 'Item 1' },
            { id: 2, text: 'Item 2', children: [
                { id: 3, text: 'Child 1' },
                { id: 4, text: 'Child 2', children: [
                    { id: 5, text: 'Sub Child 1' },
                    { id: 6, text: 'Sub Child 2' }
                ]}
            ]}
        ],
        theme: 'bootstrap4',
        placeholder: 'انتخاب کنید',
        allowClear: true,
        dropdownAutoWidth: true,
        width: '100%',
        minimumResultsForSearch: -1
    });
});
</script>

در این کد، یک SelectOption با سه سطح به کمک Select2 پیاده‌سازی شده است. ساختار JSON آن با دو آیتم در سطح اول و دو فرزند برای آیتم دوم است. با اجرای کد بالا، یک SelectOption درختی با قابلیت انتخاب آیتم‌های سه سطحی نمایش داده می‌شود.